<template>
    <div>
        <el-dialog
    class="dialog"
    v-model="props.dialogVisible"
    :title="`${props.assessInfo?.userName}对${props.assessInfo?.flowerName}的评价`"
    :before-close="handleClose"
  >
    <div>
      {{ `用户评论：${props.assessInfo?.messageAry[0]?.message}` }}
    </div>
    <div v-if="props.assessInfo?.messageAry.length>1" style="margin-top: 10px;">
      {{`您的回复：${props.assessInfo?.messageAry[1]?.message}`  }}
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-input class="input" v-model.trim="assessInput" placeholder="请输入您对此评论的回复" clearable></el-input>
        <el-button type="primary" @click="handleConfirm">
          确认回复评论
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>

<script setup>
import {Assess} from '@/api/guidances'
import { defineProps ,defineEmits,reactive,ref,onMounted} from 'vue';
import { ElMessage } from 'element-plus'
// 接收父组件传值
const props = defineProps({
    dialogVisible:false, // 是否展示
    assessInfo:{}
})
// 子传父的方法
const emits = defineEmits(['assessDialogShow','completed'])
// 输入框的默认值
let assessInput = ref('')
// 点击关闭的回调函数
const handleClose = () => {
    emits('assessDialogShow',false)
}
// 点击确认的函数
const handleConfirm = async() =>{
    if(assessInput.value === '') {
      ElMessage.error('回复评论不能为空')
      return
    }
    const data = {
        isAdmin:true,
        message:assessInput.value,
        commodityOrders_id:props.assessInfo?.commodityOrders_id,
    }
    // 调用创建用户接口
    await Assess(data)
    ElMessage({
      type: 'success',
      message: '评价回复成功'
    })
    // 向父组件中传值
    emits('assessDialogShow',false)
    emits('completed')
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog){
    border-radius: 15px;
}
.dialog-footer{
  display: flex;
  .input{
    margin-right: 10px;
  }
}
</style>